<template>
  <div>
    <el-button type="primary" @click="openDialog()">业务录入</el-button>

    <el-dialog :visible.sync="dialogVisible" title="业务录入" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="客户名称" v-if="!showCustomerDetail" :rules="{ required: true, message: '请输入客户名称' }">
          <el-input v-model="searchName" @blur="onNameChange()"></el-input>
        </el-form-item>
        <el-table :data="customerList" v-if="showCustomerList" @row-dblclick="onRowClick">
          <el-table-column prop="name" label="客户名称">
            <template slot-scope="scope">
              <el-link @click.native.prevent="onRowClick(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="showCustomerDetail">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="form.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="业务类型" prop="bus_name" :rules="{ required: true, message: '请选择业务类型' }">
            <el-select v-model="form.bus_name" placeholder="请选择业务类型">
              <el-option v-for="type in types" :key="type.id" :label="type.label"
                :value="type.business_name"></el-option>
            </el-select>
          </el-form-item>

        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="showCustomerDetail">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false,
      searchName: '',
      form: {
        name: '',
        bus_name: '',
        description: ''
      },
      ids: {
        customer_id: 0,
        business_id: 0,
        create_time: '',
        operator: 'operator1'
      },
      types: [],
      customerList: [],
      showCustomerList: false,
      showCustomerDetail: false
    };
  },
  methods: {
    async fetchBusinessTypes() {
      await axios.post('/api/business/searchname')
        .then(response => {
          const data = response.data.data;
          this.types = data;
          console.log(data)
        }).catch(error => {
          console.error('获取业务类型失败:', error);
        });
    },
    openDialog() {
      this.dialogVisible = true;
      this.resetForm();
    },
    async onNameChange() {
      await this.fetchBusinessTypes();
      if (this.searchName) {
        try {

          const response = await axios.post('/api/customer/searchAll', this.searchName, {
            headers: {
              'Content-Type': 'text/plain'
            }
          });
          this.customerList = response.data.data;
          this.showCustomerList = true;
          this.showCustomerDetail = false;
        } catch (error) {
          this.$message.error('查询客户失败');
        }
      } else {
        this.showCustomerList = false;
        this.showCustomerDetail = false;
      }
    },
    onRowClick(row) {
      this.form.name = row.name;
      this.showCustomerDetail = true;
      this.showCustomerList = false;
    },
    async onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          
          this.ids.business_id = await (await axios.post('/api/business/getbusid', this.form.bus_name, {
            headers: {
              'Content-Type': 'text/plain'
            }
          })).data;
          
          
          this.ids.customer_id = (await axios.post('/api/business/getcustid', this.form.name, {
            headers: {
              'Content-Type': 'text/plain'
            }
          })).data;
          try {
            await axios.post('/api/business/custaddbus', this.ids)
              .then(response => {
              });
            this.$message.success('业务保存成功');
            this.dialogVisible = false;
            this.resetForm();
            // 返回到业务管理功能首页
            
          } catch (error) {
            this.$message.error('保存业务信息失败');
          }

        } else {
          this.$message.error('请填写所有必填项');
        }
      });
    },
    resetForm() {
      this.searchName = '';
      this.form = {
        name: '',
        bus_name: '',
        description: ''
      };
      this.customerList = [];
      this.showCustomerList = false;
      this.showCustomerDetail = false;
    }
  }
};

</script>